<template>
  <div class="my">
    <Header />

    <!-- 内容区 -->
    <main class="container">
      <div class="top_box">
        <div class="info">
          <div class="avatar">
            <img :src="QNURL + userInfo.avatar" alt="" />
          </div>
          <div class="value">
            <span>{{ userInfo.nickName }}</span>
            <span />
          </div>
        </div>
        <div class="tab">
          <div
            v-for="(item, index) in tabList"
            :key="index"
            :class="['item', index == currenttabIndex ? 'active_item' : '']"
            @click="tabItemClick(item, index)"
          >
            {{ item.label }}
          </div>
        </div>
      </div>
      <div class="bottom_box" ref="bottomBoxRef">
        <div
          class="content"
          :style="{
            transform: `translateX(${bottomBoxLeft}px)`,
            width: tabList.length * 100 + '%'
          }"
        >
          <div class="box_home content_box">主页</div>
          <div class="box_put_article content_box">
            <div class="title">我的发帖</div>
            <div
              class="item"
              v-for="(item, index) in userArticleList"
              :key="index"
            >
              <div class="l">
                <span>{{ item.title }}</span>
                <span class="time">{{ item.updateTime }}</span>
              </div>
              <div class="r" v-if="item.userId == userStore.userInfo.userId">
                <el-button @click="updateClickHandle(item)" type="primary" link
                  >编辑</el-button
                >
                <el-button @click="deleteClickHandle(item)" type="danger" link
                  >删除</el-button
                >
              </div>
            </div>
          </div>
          <div class="box_dynamic content_box">动态</div>
          <div class="box_collect content_box">收藏</div>
          <div class="box_like content_box">点赞</div>
          <div class="box_setting content_box">
            <Setting
              :userInfo="userInfo"
              @updateUserInfoSuccess="updateUserInfoSuccess"
            />
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<script setup lang="ts">
import Header from "@/components/header/Header.vue";
import Setting from "./components/Setting.vue";
import { getUserInfo } from "@/api/user/user";
import { onMounted, reactive, ref } from "vue";
import { useUserStoreHook } from "@/store/modules/user";
import { QNURL } from "@/config/urlConfig";
import { getUserArticle, deleteArticle } from "@/api/community/index";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";

const router = useRouter();
// import { useRouter } from "vue-router";

// const router = useRouter();

const userStore = useUserStoreHook();

const tabList = [
  {
    label: "主页"
  },
  {
    label: "投稿"
  },
  {
    label: "动态"
  },
  {
    label: "收藏"
  },
  {
    label: "点赞"
  },
  {
    label: "设置"
  }
];

const currenttabIndex = ref(0);

const bottomBoxRef = ref();

let bottomBoxLeft = ref(0);

function tabItemClick(item: any, index: number) {
  currenttabIndex.value = index;
  bottomBoxLeft.value = index * -bottomBoxRef.value.clientWidth;
}

// --------------------------------------------
let userInfo = reactive<any>({});

async function getUserInfoFun() {
  const res = await getUserInfo({ id: userStore.getUserInfo?.userId });

  userInfo = Object.assign(userInfo, res.data);
}

function updateUserInfoSuccess() {
  getUserInfoFun();
}

// ----------------------------- 投稿 ------------------------------
const userArticleList = ref<any>([]);
async function getUserArticleFun() {
  const res = await getUserArticle({
    userId: userStore.getUserInfo?.userId,
    pageSize: 999
  });

  userArticleList.value = res.data.records;
}

function updateClickHandle(item: any) {
  const href = router.resolve({
    path: "/publish",
    query: { type: 0, id: item.id }
  });
  window.open(href.href, "_blank");
}

async function deleteClickHandle(item: any) {
  const res = await deleteArticle([item.id]);

  if (res.code === 200) {
    ElMessage.success("删除成功");
    getUserArticleFun();
  }
}

onMounted(() => {
  getUserInfoFun();
  getUserArticleFun();
});
</script>

<style lang="scss" scoped>
.my {
  width: 100%;
  min-height: 100vh;
  background-color: var(--bg-color);

  .container {
    width: 1200px;
    min-height: 550px;
    margin: 0 auto;
    border-radius: 10px;
  }
}

.top_box {
  width: 100%;
  height: 300px;
  background: url("@/assets/images/1.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  align-items: flex-end;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 1px 1px 1px 1px solid #ccc;
  overflow: hidden;
  padding-bottom: 80px;
  position: relative;
  // justify-content: flex-end;

  .tab {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background-color: #fff;
    padding: 0 20px;
    display: flex;
    align-items: center;
    transition: 0.3s;

    .item {
      cursor: pointer;
      width: 80px;
      text-align: center;
      height: 100%;
      line-height: 60px;
      position: relative;
      // transition: all 0.3s;
    }

    .active_item {
      &::before {
        position: absolute;
        content: "";
        left: 50%;
        bottom: 0;
        transform: translate(-50%, 0);
        width: 100%;
        height: 3px;
        background-color: var(--orange-color);
      }

      // border-bottom: 2px solid #409eff;
      color: var(--orange-color);
    }
  }

  .info {
    display: flex;
    .avatar {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      overflow: hidden;
      margin-right: 30px;
      border: 5px solid #fff;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .value {
      display: flex;
      flex-direction: column;
      font-size: 20px;
      justify-content: space-around;
    }
  }
}

.bottom_box {
  margin-top: 20px;
  width: 100%;
  min-height: 800px;
  border-radius: 10px;
  position: relative;
  overflow: hidden;

  .content {
    height: 100%;
    display: flex;
    position: absolute;
    top: 0;
    transition: all 0.5s;

    .content_box {
      padding: 20px;
      border-radius: 10px;
      width: 100%;
      height: 100%;
      background-color: #fff;
    }

    .box_put_article {
      .title {
        font-size: 20px;
        font-weight: bold;
        position: relative;
        padding-left: 10px;
        margin-bottom: 10px;

        &::after {
          position: absolute;
          content: "";
          left: 0;
          top: 50%;
          transform: translateY(-50%);
          height: 80%;
          width: 5px;
          background-color: var(--orange-color);
          border-radius: 3px;
        }
      }
      .item {
        width: 100%;
        height: 50px;
        display: flex;
        align-items: center;
        border-bottom: 1px solid #eee;
        padding: 0 10px;

        .l,
        .r {
          flex: 1;

          .time {
            margin-left: 20px;
            color: var(--secondary-color);
            font-size: 12px;
          }
        }

        .r {
          display: flex;
          justify-content: flex-end;
        }
      }
    }
  }
}
</style>
